<template>
  <div class="post" @click="$router.push({path:`/article/${post.id}`})">
    <!-- 左右结构 -->
    <div class="type1" v-if="post.type === 1 && post.cover.length < 3">
      <div class="left">
        <h3 class="title">{{post.title}}</h3>
        <p class="desc">
          <span>{{post.user.nickname}}</span>
          <span>{{post.comment_length}}跟帖</span>
        </p>
      </div>
      <van-image 
      fit="cover"
      class="right"
      :src="post.cover[0].url | imgUrl"
      />
    </div>
    <!-- 结构2 -->
    <div class="type2" v-else-if="post.type === 1 && post.cover.length >= 3">
      <h3 class="title">{{post.title}}</h3>
      <div class="cover-group">
        <van-image 
          fit="cover"
          class="cover-img"
          v-for="item in post.cover"
          :key="item.id"
          :src="item.url | imgUrl"
        />
      </div>
      <p class="desc">
        <span>{{post.user.nickname}}</span>
        <span>{{post.comment_length}}跟帖</span>
      </p>
    </div>
    <!-- 结构3 -->
    <div
      class="type3"
      v-else-if="post.type === 2"
    >
      <h3 class="title">{{post.title}}</h3>
      <div class="video-group">
        <i class="iconfont iconshipin"></i>
          <van-image 
          fit="cover"
          class="video-img"
          :src="post.cover[0].url | imgUrl"
        />
      </div>
      <p class="desc">
        <span>{{post.user.nickname}}</span>
        <span>{{post.comment_length}}跟帖</span>
      </p>
    </div>

  </div>
</template>

<script>
// import request from '../utils/myaxios'
export default {
   props:{
    // post:变量的类型要求是对象，必须传递
    post:{
      type:Object,
      required:true
    },
  },
  // 局部过滤器
  // filters:{
    // imgUrl 过滤器名称
    // val 过滤器要处理的原始数据
    // imgUrl(val) {
      // console.log(val); 
      // return val;
      // 如果没有http 开始，就需要拼接完成完整的图片地址
      // if(val.indexOf('http') === -1) {
      //   return request.defaults.baseURL + val
      // } else {
      //   // 是http 开头，就直接返回即可
      //   return val
      // }
    // }
  // }
}
</script>

<style lang="less" scoped>
// 标题和描述都是跟一样的，所以写到外面
 .title{
    font-size: 16px;
    margin: 5px 0;
  }
  .desc{
    color: #ccc;
    margin: 5px 0;
  span{
    font-size: 12px;
    margin-right: 10px;
    }
  }
  .type1 {
    display: flex;
    background-color: #fff;
    .left{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
     
    }
    .right{
      width: 120px;
      height: 75px;
    }
  }
  .type2{
    padding: 10px;
    .cover-group{
      display: flex;
      justify-content: space-between;
      .cover-img{
        width: 33%;
      }
    }
  }
  .type3{
    padding: 10px;
    .video-group{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconshipin{
        font-size: 50px;
        color: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: rgba(0,0,0,.5);
        position: absolute;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .video-img{
        width: 100%;
      }
    }
  }
</style>